<template>
  <view class="login">
    <view class="title-logo">
      <u--image
        class="logo-image"
        :showLoading="true"
        :src="logo"
        width="272rpx"
        height="68rpx"
      ></u--image>
    </view>
    <view class="login-container">
      <u--form :model="userInfo" :rules="rules" ref="uForm">
        <u-form-item prop="username">
          <u--input
            v-model="userInfo.username"
            placeholder="请输入用户名"
          ></u--input>
        </u-form-item>
        <u-form-item prop="password">
          <u--input
            v-model="userInfo.password"
            placeholder="请输入密码"
          ></u--input>
        </u-form-item>
        <u-form-item prop="vcode">
          <u--input
            v-model="userInfo.vcode"
            placeholder="请输入验证码"
          ></u--input>
          <u--image
            :showLoading="true"
            :src="imgSrc"
            width="180rpx"
            height="72rpx"
            @click="refresh"
          ></u--image>
        </u-form-item>
      </u--form>
      <u-button type="primary" @click="submit" class="btn">登 录</u-button>
      <view class="register-btn" @click="linkRegister">免费注册</view>
    </view>
  </view>
</template>

<script>
import logo from "@/static/images/logo.png";
import { login } from "@/api/login";
export default {
  data() {
    return {
      userInfo: {
        username: "test004",
        password: "123456",
        vcode: "",
      },
      logo,
      imgSrc: "/to_passport/sso/valid/code",
      rules: {
        username: {
          type: "string",
          required: true,
          message: "请输入用户名",
          trigger: ["blur", "change"],
        },
        password: {
          type: "string",
          required: true,
          message: "请输入密码",
          trigger: ["blur", "change"],
        },
        vcode: {
          type: "string",
          required: true,
          message: "请输入验证码",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  onLoad() {},
  methods: {
    async submit() {
      try {
        await this.$refs.uForm.validate();
        const res = await login(this.userInfo);
        if (res.code == 0) {
          uni.setStorageSync("token", `${res.data.type} ${res.data.jwt}`);
          uni.setStorageSync("userInfor", JSON.stringify(res.data));
          uni.switchTab({
            url: "/pages/tabBar/staging/index",
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    refresh() {
      this.imgSrc = this.$options.data().imgSrc + "?" + Math.random();
    },
    linkRegister() {
      uni.navigateTo({
        url: "/pages/register/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}
.login {
  .nav {
    height: 44px;
  }
  .title-logo {
    padding: 180rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-container {
    padding: 0 64rpx;
    .btn {
      margin-top: 32rpx;
    }
    .register-btn {
      width: 120rpx;
      color: #3c9cff;
      font-size: 28rpx;
      margin-top: 32rpx;
      float: right;
    }
  }
}
</style>
